<template>
    <div class="userProfile" :class="loadingPage && 'g-loadingPage'">
        <c-header :leftType="isSelf ? 'menu' : 'back'" :title="isSelf ? '我的信息' :'用户信息'">
            <span slot="right">
                <router-link v-if="isSelf" :to="{name:'collect'}">
                    <i class="fa fa-book" aria-hidden="true"></i>
                </router-link>
                <i v-else>...</i>
            </span>
        </c-header>
        <section class="body" v-if="'loginname' in userInfo">
            <div class="avatar_box">
                <div class="avatar m-avatar">
                    <img :src="userInfo.avatar_url" alt="">
                </div>
                <div class="name">
                    {{userInfo.loginname}}
                </div>
                <div class="info">
                    <span class="lastLoginTime">{{formatTime(userInfo.create_at)}}</span>
                    <span class="g-color">积分：{{userInfo.score}}</span>
                </div>
            </div>
            <div class="tab_box">
                <ul class="tab_ul">
                    <li @click="tabNum = 1" :class="tabClass(1)">最近回复</li>
                    <li @click="tabNum = 2" :class="tabClass(2)">最新发布</li>
                </ul>
                <div class="content" :class="tabClass(1)">
                    <ul v-if="userInfo.recent_replies.length">
                        <li v-for="item in userInfo.recent_replies">
                            <div @click="toUserProfile(item.author.loginname)" class="avatar m-avatar">
                                <img :src="item.author.avatar_url" alt="">
                            </div>
                            <div @click="toTopic(item.id)" class="info">
                                <p>{{item.title}}</p>
                                <span>{{item.author.loginname}}</span>
                                <div class="time g-color">
                                    {{formatCountDownTime(item.last_reply_at)}}
                                </div>
                            </div>
                        </li>
                    </ul>
                    <div v-else class="noDate">
                        暂无数据!
                    </div>
                </div>
                <div class="content" :class="tabClass(2)">
                    <ul v-if="userInfo.recent_topics.length">
                        <li v-for="item in userInfo.recent_topics">
                            <div @click="toUserProfile(item.author.loginname)" class="avatar m-avatar">
                                <img :src="item.author.avatar_url" alt="">
                            </div>
                            <div @click="toTopic(item.id)" class="info">
                                <p>{{item.title}}</p>
                                <span>{{item.author.loginname}}</span>
                                <div class="time g-color">
                                    {{formatCountDownTime(item.last_reply_at)}}
                                </div>
                            </div>
                        </li>
                    </ul>
                    <div v-else class="noDate">
                        暂无数据!
                    </div>
                </div>
            </div>
        </section>
    </div>
</template>
<script>
import * as API from '../api'
import Share from './../share'
import cHeader from './Header'
import cMenu from './menu'

export default {

    name: 'userProfile',

    mixins: [Share],

    components: {
        cHeader,
        cMenu,
    },

    data() {
        return {
            title: 'test!',
            tabNum: 1,
            loadingPage: false,
            userInfo: {}
        }
    },

    activated() {
        this.getUserInfo();
        // console.log(this.$store.state.user.userInfo)
    },

    computed: {

        isSelf() {
            var bool = false;
            if (this.selfUserInfo.loginname == this.queryName || !this.queryName) {
                bool = true;
            }
            return bool;
        },

        selfUserInfo() {
            return this.$store.state.user.userInfo;
        },

        queryName() {
            return this.$route.query.name || this.selfUserInfo.loginname;
        },
    },

    methods: {

        tabClass(num) {
            if (this.tabNum == num) {
                return 'selected';
            }
        },

        getUserInfo() {
            var tthis = this,
                cacheUser = JSON.parse(Util.getSessionStorage('userList')) || {};
            if (cacheUser[tthis.queryName]) {
                tthis.renderUserInfo(cacheUser[tthis.queryName].data);
            } else {
                if (!tthis.loadingPage) {
                    tthis.loadingPage = true;
                    API.user({
                        userName: tthis.queryName ? tthis.queryName : 'guofuming',
                        success(response) {
                            tthis.renderUserInfo(response.data);
                            tthis.cacheUser(response.data);
                        },
                        complete() {
                            tthis.loadingPage = false;
                        }
                    })
                }
            }
        },

        renderUserInfo(data) {
            this.userInfo = data;
        },

        cacheUser(data) {
            var cacheUser = JSON.parse(Util.getSessionStorage('userList')) || {};
            cacheUser[data.loginname] = { data: data };
            Util.setSessionStorage('userList', JSON.stringify(cacheUser));
        },
    },

    watch: {
        '$route.query.name': function(newVal) {
            if (this.$route.name == 'userProfile') {
                this.getUserInfo();
            }
        }
    }
}

</script>
<style lang="less" scoped>
.avatar_box {
    width: 100%;
    background-color: #ececec;
    text-align: center;
    padding: 28px 0 18px;
    .avatar {
        width: 94px;
        height: 94px;
        font-size: 94px;
        box-shadow: 2px 2px 5px #e2e2e2;
        background-size: 44px;
    }
    .name {
        line-height: 38px;
        font-size: 18px;
        /*font-weight: bold;*/
    }
    .avatar img {
        max-width: 100%;
        max-height: 100%;
    }

    .info {
        padding: 12px 20px 0;
        text-align: right;
    }

    .info span:first-child {
        float: left;
    }

    .info span:last-child {
        font-weight: bold;
    }
}

.tab_box {

    .tab_ul {
        width: 100%;
        height: 42px;
        line-height: 42px;
    }
    .tab_ul li {
        width: 50%;
        height: 42px;
        float: left;
        text-align: center;
        font-weight: 700;
        border-bottom: 1px solid #e2e2e2;
    }
    .tab_ul li:first-child {
        border-right: 1px solid #e2e2e2;
        width: calc(50% - 1px);
    }
    .tab_ul li.selected {
        color: #ff5a5f;
        border-bottom: 2px solid #ff5a5f;
    }

    .content {
        display: none;
    }

    .content.selected {
        display: block;
    }

    .content .noDate {
        padding-top: 40px;
        text-align: center;
        font-size: 16px;
    }

    .content li {
        height: 74px;
        border-bottom: 1px solid #e2e2e2;
    }
    .avatar {
        float: left;
        width: 46px;
        height: 46px;
        margin-left: 12px;
        margin-top: 13px;
        border-radius: 10px;
        overflow: hidden;
    }

    .content .info {
        padding-top: 16px;
        padding-left: 15px;
        overflow: hidden;
    }
    .content .info p {
        font-weight: 600;
        font-size: 15px;
        color: #333;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .content .info span {
        color: #999;
    }

    .content .info .time {
        padding-top: 10px;
        font-size: 12px;
        float: right;
        padding-right: 10px;
    }
}

</style>
